<template>
	<view :style="{
		'background-color':(current==2?'rgb(248,248,250)':'')
	}">
		<view style="border-bottom: 1rpx solid #E3E3E3;">
			<liuyuno-tabs :tabData="list" :activeIndex="current" @tabClick='tabClick' />
		</view>
		<!-- 精品课程 -->
		<view class="boddy" v-if="current==0">
			<jpkc :type='2' />
			<!-- <view class="boddyu" @click="submib(item,index)" v-for="(item,index) in 4">
				<view class="images" :style="{
			      'background-repeat': 'no-repeat',
				  backgroundImage: 'url(' + 'https://s4.ax1x.com/2022/01/13/7Q5vb8.png' + ')',
			      'background-size': '100% 100%',}">
					<image style="width: 64rpx;height: 36rpx;
				   margin: 20rpx 0 0 20rpx;
				   " :src="current==2?'https://s4.ax1x.com/2022/01/19/7DMqKS.png':
				   index%2==0?'https://s4.ax1x.com/2022/01/19/7DQSCq.png':
				   'https://s4.ax1x.com/2022/01/19/7DMqKS.png'"></image>
				</view>
				<view class="boddyu_1 hh">
					给管理者们的沟通训给管理者们的沟通训...
				</view>
				<view class="boddyu_2 hh">
					尤其在竞争日益激烈管理者们的沟通训...
				</view>
				<view class="boddyu_3 hh">
					<text>124</text>
					人已学习
				</view>
			</view> -->
		</view>
		<!-- 直播 -->
		<view class="zhibo" v-if="current==1">
			<zb />
			<!-- <view v-for="(item,index) in 6">
				<view class="body2">
					<image class='imgall' src="../../static/img/4608.png" mode="" />
					<view class="text">
						<view class="text_1 ">如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更 如何让你的课堂气氛更氛更</view>
						<view class="text_2 ">幽默让学生更加喜欢你学生更加幽默让学生更加喜欢你学生更加......</view>
						<view class="text_3">
							<view class="" style="position: relative;bottom: -10px;">
								<text>451</text> <text style='font-weight: 600; color: black;'>人已预约</text>
							</view>
							<image @click="submit(item,index)" :src="index%2?src:src1" />
						</view>
					</view>
				</view>
				<view class="xian2" v-if="index!=5" />
			</view> -->
		</view>
		<!-- 线下课 -->
		<view class="xianxia" v-if="current==2">
			<xxk />
			<!-- <view class="xianxia_1" v-for="(item,index) in 5">
				<image style="width:100% ;height:240.07rpx ;" src="https://s4.ax1x.com/2022/01/23/74otMR.png" />
				<view class="xianxia_2">
					<view class="xianxia_2_1 mybox">
						<text class="xianxia_2_1t">教育的未来前瞻【洛阳站】</text>
						<text class="xianxia_2_t"><text>124</text>人已报名</text>
					</view>
					<view class="xianxia_2_2">
						幼儿教育是考研教师如果课堂纪律不好，孩子们就会相互影
						响，且认为老师是不负责任。
					</view>
					<view class="xianxia_2_3 mybox">
						<text>课程时间：2021年10月10日</text>
						<image style="width:160rpx ;height: 58rpx;" :src="require('@/static/img/bm.png')" />
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				src: require('@/static/img/4805.png'),
				src1: require('@/static/img/dyy.png'),
				list: [{
					name: '精品课程',
					width: '200rpx'
				}, {
					name: '直播'
				}, {
					name: '线下课'
				}],
				current: 0
			}
		},
		methods: {
			tabClick(item, index) {
				this.current = index;
			},
			submib(a, b) {
				uni.navigateTo({
					url: './xiangqing'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xianxia {
		padding: 0rpx 30rpx 20rpx 30rpx;
		background-color: rgb(248, 248, 250);
		min-height: 1000rpx;
		margin-top: 40rpx;

		.xianxia_1 {
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
		}

		.xianxia_2 {
			padding: 0rpx 15rpx 15rpx 15rpx;

			.xianxia_2_3 {
				margin-bottom: 20rpx;

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
				}
			}

			.xianxia_2_2 {
				margin: 15rpx 0rpx 15rpx 0rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40rpx;
				color: #131314;
				letter-spacing: 2rpx;
				opacity: 1;
			}

			.xianxia_2_1 {
				align-items: flex-end;

				.xianxia_2_t {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400 !important;
					color: #131314;
					opacity: 1;

					text {
						color: #FF2424;
					}
				}

				.xianxia_2_1t {
					margin-top: 10rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					opacity: 1;
				}
			}
		}
	}




	.xian2 {
		height: 1px;
		background: #EFEFEF;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		opacity: 1;
		border-radius: 0px;
	}

	.zhibo {
		margin-top: 40rpx;
		padding: 0rpx 20rpx 20rpx 20rpx;

		.body2 {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.hh {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.imgall {
				width: 240rpx;
				height: 160rpx;
			}

			.text {
				margin-left: 15rpx;
				width: 63%;
				position: relative;

				.text_1 {
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 33rpx;
					color: #131314;
					opacity: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.text_2 {
					width: 90%;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 30px;
					color: #91969A;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

				.text_3 {
					display: flex;
					justify-content: space-between;
					position: absolute;
					bottom: 0;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
					width: 100%;

					image {
						width: 140rpx;

						height: 58rpx;
					}

					text {
						color: rgb(255, 64, 64);
					}
				}

			}
		}

	}

	.images {
		width: 336rpx;
		height: 196rpx;

		.text2 {
			background-color: rgb(255, 213, 0);
			color: white;
			border-radius: 10rpx;
			padding: 3rpx 6rpx 3rpx 6rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;
		}

		.text1 {
			background-color: rgb(255, 36, 36);
			color: white;
			border-radius: 10rpx;
			padding: 3rpx 6rpx 3rpx 6rpx;
			position: relative;
			left: 20rpx;
			top: 20rpx;
		}

	}

	.boddy {
		// border: 1px solid black;
		padding: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.boddyu {
			// border: 1px solid black;
			width: 48%;

			.hh {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			margin-bottom: 20rpx;

			.boddyu_1 {
				-webkit-box-orient: vertical;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 25px;
				color: #131314;
				opacity: 1;
			}

			.boddyu_2 {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 40rpx;
				color: #91969A;
				opacity: 1;
			}

			.boddyu_3 {
				text {
					color: #FF2424;
				}

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 30px;
				color: #131314;
				opacity: 1;
			}
		}
	}
</style>
